{% extends "../base.html" %}

<!-- =================================================================== -->
<!-- Page onload ======================================================= -->
<!-- =================================================================== -->
{% block BaseHead %}
<script type="text/javascript">
GW.pageOnLoad = function() {
    GW.div.fullscreen( "idBB" );
    GW.initUserTable();
    GW.initEditUserDialog();
    GW.wait.hide();
    GW.log.log( 'admin/users.html init' );
};
GW.initUserTable = function(){
    // Setup data source
    GW.src = new YAHOO.util.XHRDataSource("/gw/json/users");
    GW.src.responseType = YAHOO.util.DataSource.TYPE_JSON;
    GW.src.connXhrMode = "queueRequests";
    GW.src.responseSchema = { resultsList: "users", 
                              fields: ["userkey", "nickname", "joined", "picture", "feed",
                                       "admin", "show", "blacklist", "lastlogin" ]
                            };
    // Setup data table
    GW.col = [
        // Actual data fields
        {key: "userkey", label: 'GWUser key', sortable:true, resizeable:true},
        {key: "nickname", label: 'Nickname', sortable:true, resizeable:true},
        {key: "joined", label: 'Joined', sortable:true, resizeable:true},
        {key: "feed", label: 'Feed', sortable:true, resizeable:true},
        {key: "admin", label: 'Admin', sortable:true, resizeable:true},
        {key: "show", label: 'Show', sortable:true, resizeable:true},
        {key: "blacklist", label: 'Black list', sortable:true, resizeable:true},
        {key: "lastlogin", label: 'Last Login', sortable:true, resizeable:true},
        // Action icons:
        // The action property is borrowed from Satyam.  It is used to customize
        // the behavior of these column to an onclick event.
        {key:'edit', label:'Edit', className: 'edit-row', action: 'edit'},
        {key:'delete', label:'Delete', className: 'delete-row', action: 'delete'}
    ];
    GW.dt = new YAHOO.widget.DataTable( "idTable", GW.col, GW.src );
    // Set up datatable editing flow
    GW.dt.subscribe("rowMouseoverEvent", GW.dt.onEventHighlightRow);
    GW.dt.subscribe("rowMouseoutEvent", GW.dt.onEventUnhighlightRow);
    GW.dt.subscribe("cellClickEvent", GW.userClick );
};
// Init new user dialog
GW.initEditUserDialog = function(){
    // Create and render the dialog
    GW.userDialogConfig = {
        postmethod: "none",
        fixedcenter : true,
        visible : false, 
        hideaftersubmit: true,
        constraintoviewport: true,
        modal: true,
        buttons : [ { text:"Cancel", handler:GW.userCancel, isDefault:true },
                    { text:"Save", handler:GW.userSave }]
    };
    GW.userDialog = new YAHOO.widget.Dialog("idUserDialog", GW.userDialogConfig );
    GW.userDialog.render(document.body);
};
// Handle user click 
GW.currentEditRow = null;
GW.userClick = function(oArgs){
    var target = oArgs.target;
    var column = this.getColumn(target);
    var action = column.action;
    var row = this.getRow(target);
    GW.currentEditRow = row;
    var data = GW.dt.getRecord(row).getData();
    // Columns with action icons should have an action property
    // The action property, not the visual image, determins the action.
    if (action == 'edit') {
        // init the form fields
        GW.userDialog.form.userkey.value = data.userkey;
        GW.userDialog.form.nickname.value = data.nickname;
        GW.userDialog.form.joined.value = data.joined;
        GW.userDialog.form.feed.value = data.feed;
        GW.userDialog.form.admin[0].checked = data.admin;
        GW.userDialog.form.admin[1].checked = !data.admin;
        GW.userDialog.form.show[0].checked = data.show;
        GW.userDialog.form.show[1].checked = !data.show;
        GW.userDialog.form.blacklist[0].checked = data.blacklist;
        GW.userDialog.form.blacklist[1].checked = !data.blacklist;
        GW.userDialog.form.lastlogin.value = data.lastlogin;
        // display the form
        GW.userDialog.bringToTop();
        GW.userDialog.show();
        return;
    }
    if (action == 'delete') { 
        if ( !confirm('Are you sure you want to delete the user ' + data.nickname + '?')) { 
            return;
        }
        // send delete to server
        var callback = {
            failure: function(o){
                var msg = 'User delete failed. Status:' + o.status + ' Text:' + o.statusText;
                GW.log.log( msg, 'error', 'admin/users' );
                alert( 'Failure, see log!' );
            },
            success: function(o){
                var msg = 'User delete succeeded. Status:' + o.status + ' Text:' + o.statusText;
                GW.log.log( msg, 'info', 'admin/users' );
                alert( 'User delete successful.' );
                this.deleteRow( row ); 
                },
            scope: this,
            timeout: 10000
        };
        var uri = '/gw/json/user/' + data.userkey; 
        var request = YAHOO.util.Connect.asyncRequest( 'DELETE', uri, callback );
        return;
    }
};
// Cancel user dialog
GW.userCancel = function( click, dialog ){
    dialog.cancel();
};
// Save a user
GW.userSave = function( click, dialog ){
    // Post to the GeoWiki server
    var callback = {
        success: function(o){
            // update the data table GW.dt
            var data = GW.dt.getRecord( GW.currentEditRow ).getData();          // get the old record
            data.feed = GW.userDialog.form.feed.value;                          // set values in the data record
            data.admin = GW.userDialog.form.admin[0].checked;
            data.show = GW.userDialog.form.show[0].checked;
            data.blacklist = GW.userDialog.form.blacklist[0].checked;
            GW.dt.updateRow( GW.currentEditRow, data );                         // now actually update the DT row
            // report success
            var msg = 'User save Succeeded. Status:' + o.status + ' Text:' + o.statusText;
            GW.log.log( msg, 'info', 'admin/users' );
            alert( 'User save successful' );
        },
        failure: function(o){
            var msg = 'User save failed. Status:' + o.status + ' Text:' + o.statusText;
            GW.log.log( msg, 'error', 'admin/users' );
            alert( 'Failure, see log' );
        },
        timeout: 10000
    };
    // get the file name
    var oform = document.getElementById( 'idUserEdit' );
    YAHOO.util.Connect.setForm( oform );
    var userkey = dialog.form.userkey.value;
    var uri = '/gw/json/user/' + userkey;
    var request = YAHOO.util.Connect.asyncRequest( 'POST', uri, callback );
    dialog.cancel();
};
// Exit to admin page
GW.exit = function(){
    window.location = "/admin";
};

</script>
{% endblock %}

<!-- =================================================================== -->
<!-- Page body ========================================================= -->
<!-- =================================================================== -->
{% block BaseBody %}
<style type="text/css">
    .delete-row {
        cursor:pointer;
        background: transparent url(/static/img/deleterow.png) no-repeat center center;
        width:16px;height:16px;
    }
    .edit-row {
        cursor:pointer;
        background: transparent url(/static/img/edit.png) no-repeat center center;
        width:16px;height:16px;
    }
    .userLabel { 
        display:block;
        float:left;
        width: 15em;
        padding-right: 0.5em;
        font-size: 80%;
        clear:left; 
        margin-bottom: 0.5em;
    }
    .userInput {
        margin-bottom: 0.5em;
    }
</style>

<div id="idBB" style="overflow: auto;" >
    <div style="padding-left: 0.5em; padding-top: 0.5em;">
        <p><br />To edit an existing user click the table row.<br /><b>NOTE:</b> 
        Modifications to the users take place <b>IMMEDIATELY</b> when <b>SAVE</b> is clicked.</p>
        <p>&nbsp;</p>
        <div id='idTable'><!-- data table goes here --></div>
    </div>
</div>

<!-- ***********************************************************************
User dialog allows editing of user information and deletion of users.
************************************************************************ -->
<div id="idUserDialog" >
    <div class="hd">Please enter user information</div>
    <div class="bd">
        <form id="idUserEdit" method="post" enctype="multipart/form-data" action="/gw/json/userxxx" name="Form1">
            <div class="clear"></div>
            <label for="userkey" class="userLabel" >GWUser key:</label>
            <input class="userInput" type="text" name="userkey" value="" size="60" readonly="readonly" />
            <div class="clear"></div>
            <label for="nickname" class="userLabel" >User Nickname:</label>
            <input class="userInput" type="text" name="nickname" value="" size="60" readonly="readonly" />
            <div class="clear"></div>
            <label for="joined" class="userLabel" >Joined:</label>
            <input class="userInput" type="text" name="joined" value="" size="60" readonly="readonly" />
            <div class="clear"></div>
            <label for="feed" class="userLabel" >Feed:</label>
            <input class="userInput" type="text" name="feed" value="" size="60" />
            <div class="clear"></div>
            <label for="admin" class="userLabel" >Admin:</label>
            Yes <input class="userInput" type="radio" name="admin" value="true" size="60" />
            No <input class="userInput" type="radio" name="admin" value="false" size="60" checked="true" />
            <div class="clear"></div>
            <label for="show" class="userLabel" >Show user:</label>
            Yes <input class="userInput" type="radio" name="show" value="true" size="60" />
            No <input class="userInput" type="radio" name="show" value="false" size="60" checked="true" />
            <div class="clear"></div>
            <label for="blacklist" class="userLabel" >Black list user:</label>
            Yes <input class="userInput" type="radio" name="blacklist" value="true" size="60" />
            No <input class="userInput" type="radio" name="blacklist" value="false" size="60" checked="true" />
            <div class="clear"></div>
            <label for="lastlogin" class="userLabel" >Last login:</label>
            <input class="userInput" type="text" name="lastlogin" value="" size="60" readonly="readonly" />
        </form>
    </div>
</div>
{% endblock %}


